<template>
  <div>
    <!-- 标题栏 -->
    <div id="title">
      <span class="iconfont">&#xe6bc;</span>
      <h2>小U商城</h2>
      <p>
        <span class="iconfont">&#xf0112;</span>
        <span class="iconfont">&#xe71e;</span>
        <i></i>
      </p>
    </div>
    <!-- 头部搜索 -->
    <header>
      <span class="iconfont">&#xe613;</span>
      <h1>
        <img src="images/logo.jpg" alt="" />
      </h1>
      <input type="text" placeholder="&#xe610; 按内容搜索" class="iconfont" />
      <b class="iconfont">&#xe663;</b>
    </header>
    <!-- 导航部分 -->
    <div id="nav-top">
      <nav>
        <a href="#" class="cur">推荐</a>
        <a href="#">女装</a>
        <a href="#">鞋包</a>
        <a href="#">居家</a>
        <a href="#">母婴</a>
        <a href="#">美妆</a>
      </nav>
      <p>
        <span class="iconfont">&#xe611;</span>
        <span>分类</span>
      </p>
    </div>
    <!-- 背景区 -->
    <div id="banner">
      <img src="images/banner.jpg" alt="" />
    </div>
    <!-- 分类区classify -->
    <div id="classify">
      <p>
        <img src="images/icon_1.jpg" alt="" />
        <span>限时秒杀</span>
      </p>
      <p>
        <img src="images/icon_2.jpg" alt="" />
        <span>畅销商品</span>
      </p>
      <p>
        <img src="images/icon_3.jpg" alt="" />
        <span>品质大牌</span>
      </p>
      <p>
        <img src="images/icon_4.jpg" alt="" />
        <span>小U自营</span>
      </p>
      <p>
        <img src="images/icon_5.jpg" alt="" />
        <span>积分商城</span>
      </p>
    </div>
    <!-- 限时抢购区 -->
    <div id="time">
      <div class="left">
        <div class="top">
          <h3>限时秒杀</h3>
          <p>查看更多 <em class="iconfont">&#xe601;</em></p>
        </div>
        <span>每天0点场，好货秒不停</span>
        <p class="hour">
          <b>05</b><i>:</i> <b>20</b><i>:</i>
          <b>48</b>
        </p>
      </div>
      <div class="right">
        <div class="top">
          <h3>品牌上新</h3>
          <p>9点整，抢大牌</p>
          <img src="images/mark_1.jpg" alt="" />
        </div>
        <div class="bottom">
          <h3>日用好物</h3>
          <p>愿君多采撷</p>
          <img src="images/mark_2.jpg" alt="" />
        </div>
      </div>
    </div>
    <main>
      <div class="head">
        <h4 class="cur">双十一尖货预购</h4>
        <h4>畅购全球</h4>
        <img src="images/line-2.png" alt="" />
      </div>
      <ul>
        <li><img src="images/shop.jpg" alt="" /></li>
        <li><img src="images/shop.jpg" alt="" /></li>
        <li><img src="images/shop.jpg" alt="" /></li>
        <li><img src="images/shop.jpg" alt="" /></li>
        <li><img src="images/shop.jpg" alt="" /></li>
        <li><img src="images/shop.jpg" alt="" /></li>
        <li><img src="images/shop.jpg" alt="" /></li>
        <li><img src="images/shop.jpg" alt="" /></li>
        <li><img src="images/shop.jpg" alt="" /></li>
        <li><img src="images/shop.jpg" alt="" /></li>
        <li><img src="images/shop.jpg" alt="" /></li>
        <li><img src="images/shop.jpg" alt="" /></li>
      </ul>
    </main>
    <footer>
      <p class="cur">
        <i class="iconfont">&#xeb70;</i>
        <span>商城</span>
      </p>
      <p>
        <i class="iconfont">&#xeb70;</i>
        <span>分类</span>
      </p>
      <p>
        <i class="iconfont">&#xeb70;</i>
        <span>购物车</span>
      </p>
      <p>
        <i class="iconfont">&#xeb70;</i>
        <span>我</span>
      </p>
    </footer>
  </div>
</template>

<script>
export default {};
</script>

<style>
@import "../../public/css/index.css";
</style>